import React from "react";
import { TabBar, Badge } from "antd-mobile";
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { useLocation } from 'react-router-dom';

function Menu() {
  const navigate = useNavigate();
  let location = useLocation();

  const tabs = [
    {
      key: "/",
      title: "首页",
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    // {
    //   key: "/more",
    //   title: "更多",
    //   icon: <UnorderedListOutline />,
    //   badge: "5",
    // },
    {
      key: "/all",
      title: "全部",
      icon: (active) => (active ? <MessageFill /> : <MessageOutline />),
      badge: "99+",
    },
    {
      key: "/mine",
      title: "我的",
      icon: <UserOutline />,
    },
  ];

  return (
    <div className="menu">
      <TabBar
        activeKey={location.pathname}
        onChange={(path) => {
          navigate(path);
        }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Menu;
